import React from 'react';
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity } from "react-native";
import LinearGradinet from 'react-native-linear-gradient';
import AddWalletImg from '@/assets/safe/add_wallet.png'
import IconNavBar from '@/components/IconNavBar'
import { sectokenNoSafeProps } from '@/config/navigatorProps'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenNoSafe = (props) => {

    const handlePressCreate = () => {
        props.navigation.navigate('safe-create')
    }

    const handlePressImport = () => {
        props.navigation.navigate('safe-import')
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenNoSafeProps} />
            <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 77 * ratio }}>
                <Image source={AddWalletImg} style={styles.img} />
            </View>
            <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 40 * ratio }}>
                <Text style={{ ...styles.title1, color: '#2C2C2C', width: 183 * ratio, textAlign: 'center' }}>
                    Create or Restore Wallet
                </Text>
            </View>
            <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 8 * ratio }}>
                <Text style={{ ...styles.title2, color: '#2C2C2C', width: 303 * ratio, textAlign: 'center' }}>
                    You can create new safe or import
                    existing safe to start securing your funds.
                    New to SE Wallet?
                </Text>
            </View>
            <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 71 * ratio }}>
                <TouchableOpacity onPress={handlePressCreate}>
                    <LinearGradinet colors={['#0EBBF8', '#0069F6']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.button1}>
                        <Text style={{ ...styles.title1, color: '#FFFFFF', textAlign: 'center' }}>Create new Safe</Text>
                    </LinearGradinet>
                </TouchableOpacity>
            </View>
            <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 18 * ratio }}>
                <TouchableOpacity style={styles.button2} onPress={handlePressImport}>
                    <Text style={{ ...styles.title1, color: '#0069F6', textAlign: 'center' }}>Import existing Safe</Text>
                </TouchableOpacity>
            </View>
            <View style={{ flex: 1, justifyContent: 'flex-end' }}>
                <TouchableOpacity style={styles.exitContent} onPress={() => { props.navigation.navigate('main') }}>
                    <View style={{ flexDirection: 'row' }}>
                        <Image style={{ width: 15 * ratio, height: 16 * ratio, marginRight: 7 * ratio }} source={require('@/assets/safe/exit.png')} />
                        <Text style={styles.title3}>BTC</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    exitContent: {
        width: width,
        height: 47 * ratio,
        backgroundColor: '#F5F6FA',
        justifyContent: 'center',
        alignItems: 'center'
    },
    button1: {
        width: 332 * ratio,
        height: 50,
        borderRadius: 28,
        justifyContent: 'center'
    },
    button2: {
        width: 332 * ratio,
        height: 50 * ratio,
        borderRadius: 28,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: '#0069F6',
        justifyContent: 'center'
    },
    img: {
        width: 133 * ratio,
        height: 79 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        lineHeight: 24
    },
    title2: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontWeight: '400',
        lineHeight: 21
    },
    title3: {
        fontSize: 13,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#0069F6',
        lineHeight: 19
    }
})
export default SectokenNoSafe